<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>任务八首页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--<link rel="stylesheet"
          href=https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="task8.css">
</head>
<body>
<header>

        <div class="header">

        <div class="left-v">客观热线：010-594-78634</div>

            <div class="right-v">

              <div class="two">
                  <img class="link" src="images/weixin.png">
                  <img class="link" src="images/chat.png">
                  <img class="link" src="images/weibo.png">
              </div>

            </div>

        </div>

     <div class="phone">
         <div class="option">登陆/注册</div>
     </div>



    <nav class="navbar navbar-default navbatr-fixed-right" id="navbar" role="navigation">
        <div class="container-fluid" id="container-fluid">

              <div class="row" >

                  <div class="navbar-header">
            <!--小屏幕导航按钮logo-->
                     <button class="navbar-toggle" id="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                  <div class="nav-title" ><img  src="images/title.png " width="108" height="50">  <!--技能树logo-->
                  </div>
                  </div>

   <!--导航-->
                  <div class="collapse  navbar-collapse " id="responsive-navbar" >
                      <ul class="nav navbar-nav navbar-right " >
                          <li><a style=" color: white;" href="task8.html">首页</a></li>
                          <li><a style=" color: white;" href="task8-2.html">职业</a></li>
                          <li><a style=" color: white;" href="task8-3.html">推荐</a></li>
                          <li><a style=" color: white;" href="#">关于</a></li>
                      </ul>
                  </div>

           </div>

        </div>

    </nav>


</header>

    <div id="imgSlide" class="carousel slide" >
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#imgSlide" data-slide-to="0" class="active"></li>
            <li data-target="#imgSlide" data-slide-to="1"></li>
            <li data-target="#imgSlide" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner" id="carousel-inner">

              <div class="item active">
                  <img class="d-block w-100" src="images/lf1.png" alt="First slide">
              </div>

              <div class="item">
                  <img class="d-block w-100" src="images/lf2.png" alt="Second slide">
              </div>

              <div class="item">
                  <img class="d-block w-100" src="images/lf3.png" alt="Third slide">
              </div>

        </div>

        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#imgSlide" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="right carousel-control" href="#imgSlide" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>

    <div class="main">

        <div class="container-fluid" id="bottom-4">

            <div class="row">


              <div class="col col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3" >

                    <div class="rocket">
                        <img  src="images/rocket.png">
                    </div>

                <div class="text-one">高效</div>
                <div class="text-one">将五到七年的成长时间，缩短到一年到三年。</div>

              </div>


                <div class="col col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3" >
                    <div class="rocket">
                        <div class="picture-size"></div>
                    </div>

                    <div class="text-one">规范</div>
                    <div class="text-one">标准的实战教程，不会走弯路</div>
                </div>


                <div class="col col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
                    <div class="rocket">
                        <div class="picture-size-two"></div>
                    </div>

                    <div class="text-one">人脉</div>
                    <div class="text-one">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</div>
                </div>



                <div class="col text-top col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
                    <div>

                        <div>

                            <div class="text-two">
                                <div class="portrait"></div>
                                <p class="p">12400</p>
                            </div>

                            <p class="p-two">累计在线学习人数</p>

                        </div>



                        <div class="spacing" >
                            <div class="text-two">
                                <div class="portrait"></div>
                                <p class="p">12400</p>
                            </div>

                            <p class="p-two">学员已经找到满意工作</p>

                        </div>

                   </div>

                </div>

           </div>


        </div>



<h6>如何学习</h6>


<div class="container-fluid">
    <div class="row">
        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
               <div class="circle">1</div>
               <span >匹配你现在的个人情况寻找适合自己的岗位</span>
               <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">2</div>
                <span >了解职业前景薪金待遇、 竞争压力等</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">3</div>
                <span >掌握行业内顶级技能</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">4</div>
                <span >查看职业目标任务</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">5</div>
                <span >参考学习资源，掌握技能点,逐个完成任务</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">6</div>
                <span >加入班级，和小伙伴们互帮互助，一块学习</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">7</div>
                <span >选择导师，一路引导， 加速自己成长</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

        <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="col-box">
                <div class="circle">8</div>
                <span >完成职业技能，升级业界大牛</span>
                <img  src="images/index.png" width="21" height="21">
            </div>
        </div>

    </div>
</div>

<h6>优秀学员展示</h6>

        <div class="container-fluid-3">
            <div class="row">
                <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">

                    <div class="box-border">
                      <div class="wrap" >
                        <img class="portrait-1" src="images/portrait-1.png" width="128" height="128">
                      </div>
                      <div style="font-weight: 700; text-align: center;">技术顾问：罗大佑</div>
                      <div>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</div>

                    </div>
                </div>

                <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
                    <div class="box-border">
                        <div class="wrap" ><img class="portrait-1" src="images/portrait-2.png" width="128" height="128"></div>
                        <div style="font-weight: 700; text-align: center;">技术顾问：罗大佑</div>
                        <div>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</div>
                    </div>
                </div>

                <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
                    <div class="box-border">
                        <div class="wrap" ><img class="portrait-1" src="images/portrait-3.png" width="128" height="128">
                        </div>
                        <div style="font-weight: 700; text-align: center;">技术顾问：罗大佑</div>
                        <div>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。
                        </div>
                    </div>
                </div>

                <div class=" col-12 col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
                    <div class="box-border">
                        <div class="wrap" ><img class="portrait-1" src="images/portrait-4.png" width="128" height="128">
                        </div>
                        <div style="font-weight: 700; text-align: center;">技术顾问：罗大佑</div>
                        <div>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="box-wrap" >
            <span class="switchover"></span>
            <span class="switchover"></span>
            <span class="switchover"></span>
            <span class="switchover"></span>
        </div>

        <h6>战略合作企业</h6>

        <div class="container-fluid-4">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2-5 ">
                    <div class="enterprise-wrap">
                        <div class="enterprise-one"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2-5">
                    <div class="enterprise-wrap">
                        <div class="enterprise-two"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2-5">
                    <div class="enterprise-wrap">
                        <div class="enterprise-three"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2-5">
                    <div class="enterprise-wrap">
                        <div class="enterprise-four"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-2-5 ">
                    <div class="enterprise-wrap">
                        <div class="enterprise-five"></div>
                    </div>
                </div>

            </div>
        </div>



    </div>






<footer>

    <div class="container-fluid-5">
            <h5>友情链接</h5>
        <div>
        <div class="row">

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center" ><a class="link-s"><li>找工作</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>找工作</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s" ><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>找工作</li></a></ul>
            </div >
            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center" ><a class="link-s"><li>找工作</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>找工作</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s" ><li>手机软件</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>教师招聘</li></a></ul>
            </div >

            <div class="col-xs-6 col-sm-6  col-md-3 col-lg-1">
                <ul class="center"><a class="link-s"><li>找工作</li></a></ul>
            </div >



            </div>
        </div>



    </div>


<div class="container-fluid-6 box-text">
    <div class="row">

        <div class="col-12 col-sm-12 col-md-4">

            <div >技能树 — 改变你我</div>
            <br><br>

            <div class="row-1">
            <a class="link-d">
                <div>关于我们&nbsp;|</div>
            </a>

                <a class="link-d"><div>&nbsp;联系我们&nbsp;|</div></a>

            <a class="link-d">
                <div>&nbsp;合作企业</div>
            </a>

            </div>
            <br><br>

        </div>

        <div class="col-12 col-sm-12 col-md-5">
            <div>旗下网站</div>
            <br><br>

             <div class="row-1">
                 <a class="link-d"> <div>草船云孵化器</div></a>&nbsp;
                 <a class="link-d"><div>最强IT特训营</div></a><br><br>
             </div>

            <div class="row-1">
                <a class="link-d"> <div>葡萄藤轻游戏</div></a>&nbsp;
                <a class="link-d"> <div>桌游精灵</div></a>
                <br><br>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-md-3">
            <div>
                <div class="text-code">微信公众号</div>
                <div class="code"></div>
            </div>
        </div>


    </div>
</div>

    <div class="box-footer">
        <p class="box-1">
            Copyright © 2015技能树 www.jnshu.com  All Rights Reserved | 京ICP
        </p>
    </div>
    
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


</footer>
</body>
</html>


